<template>
    <div class="event">

        <button @click="handleClick">点击欢迎你</button><br>
        <button @click="handleClick2($event, '666')">{{ ck }}</button> <br>
        <input type="text" v-model="msg">
        <h1>{{ msgCk }}</h1>
        <h1>{{ fullMsg }}</h1>
        <h1>sum is {{ sum }}</h1>

        <!-- computed和watch之间的区别：
        computed能完成的功能，watch都可以完成
        watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作 

    事件修饰符
        prevent:阻止默认事件（常用）
        stop:阻止事件冒泡（常用）
        once:事件只触发一次（常用）
        如果需要多个修饰符，比如既要阻止冒泡，又要阻止默认行为，可以@click.prevent.stop这代表先阻止默认行为，再阻止冒泡。
    
    键盘事件 (Vue中常用的按键别名)
        回车    enter
        删除    delete(捕获“删除”和“退格”键)
        退出    esc
        空格    space 
        换行    tab
        上      up
        下      down
        左      1eft
        右      right
    
    computed和watch的区别
    
    1 computed能完成的功能，watch都可以完成。
    2 watch能完成的功能，computed.不一定能完成，例如：watch可以进行异步操作。



-->


        <a href="https://www.yuque.com/cessstudy/kak11d/ya9y35" @click.prevent="sum++">sum++ 阻止默认事件</a>

        <div @click="sum++">
            <button @click.stop="sum++">阻止事件冒泡 sum</button>
        </div>

        <button @click.once="sum++">事件只触发一次</button>
        <br>

        <span>消息: {{ msg }} </span>
        <br>

        <input type="text" placeholder="请输入消息" @keyup.enter="sendMsg">


    </div>
</template>

<script>
export default {
    name: 'HelloEvent',
    data() {
        return {
            sum: 1,
            msg: '事件处理',
            ck: '点击传参',
            fullMsg: ''
        }
    },
    methods: {
        handleClick() {
            alert('hello world')
        },
        handleClick2(event, param) {
            // console.log(event, param)
            // console.log(event.target.innerText)
            alert(`hello  ${param}`)
        },
        sendMsg(event) {
            console.log(event.keyCode)
            this.msg = event.target.value
        }
    },
    computed: {
        //计算属性只有get，没有set的时候，简写成函数的样子
        msgCk() {
            return `计算属性: ${this.ck}之${this.msg}`
        }

        // 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
        /* msgCk: {
            set(val) {
                console.log('set', val)
                const arr = val.split('-')
                this.ck = arr[0]
                this.msg = arr[1]
            },
            get() {
                return `计算属性: ${this.ck}之${this.msg}`
            }
        } */
    },
    watch: {
         /* msg(val) {
            setTimeout(() => {
                this.fullMsg = `watch可以进行异步操作: ${this.ck}之${val} `
            }, 3000)
        } */

       /*  msg: {
            //watch是在数据被修改之后，才会触发，如果在配置项中添加一个immediate属性，
            //就会在一开始加载页面的时候，就触发一次：
            immediate: true,
            deep: true,
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
                this.fullMsg = `watch可以进行异步操作: ${this.ck}之${newVal} `
            }
        } */



    }
}
</script>

<style scoped>
button {
    margin-bottom: 10px;
}

.event {
    border: 5px solid #000;
    padding: 10px;
}
</style>

